import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutterwebsite/model/product.dart';
import 'dart:async';

import 'package:flutterwebsite/pages/home_banner.dart';
import 'package:flutterwebsite/services/product_service.dart';
import '../utils/utils.dart';
import 'product_detail_page.dart';
class HomeProductPage extends StatelessWidget{

  final ProductListModel list;


  HomeProductPage(this.list);



  @override
  Widget build(BuildContext context) {
    double deviceWidth=MediaQuery.of(context).size.width;
    //背景容器
    return Container(
      color: Colors.white,
      padding:EdgeInsets.only(top: 10,bottom: 10,left: 7.5) ,
      child: _build(context, deviceWidth),
    );
  }

  Widget _build(BuildContext context,double deviceWidth){
    double itemWidth=deviceWidth*168.5/360.0;
    double imageWidth=deviceWidth*110.0/360.0;
    //产品item组件列表
    List<Widget> listWidgets=list.data.map((i){
      var bgColor=String2Color('#f8f8f8');
      var titleColor=String2Color('#db5d41');
      var subTitleColor=String2Color('#999999');
      //产品item视图
      return GestureDetector(
        onTap: (){
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => ProductDetailPage(item:i)
            )
          );
        },
        child: Container(
          width: itemWidth,
          margin: EdgeInsets.only(bottom: 5,left: 2),
          padding: EdgeInsets.only(top: 10,left: 3,bottom: 7),
          color: bgColor,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              //产品名
              Text(
                i.name,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 15,color: titleColor),
              ),
              //产品描述
              Text(
                i.desc,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 15,color: subTitleColor),
              ),
              //图片容器
              Container(
                alignment: Alignment(0, 0),
                margin: EdgeInsets.only(top: 5),
                child: Image.asset(
                  i.imageUrl,
                  width: imageWidth,
                  height: imageWidth,
                ),
              )
            ],
          ),
        ),
      );
    }).toList();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        //标题
        Container(
          padding: EdgeInsets.only(left: 5,bottom: 10),
          child: Text('最新产品',style: TextStyle(fontSize: 16.0,color: Color.fromRGBO(51, 51, 51, 1)),),
        ),
        //流式布局列表
        Wrap(
          spacing: 2,
          children: listWidgets,
        )
      ],
    );
  }
}